<template>
  <a-card :bordered="false">
    <div class="table-page-search-wrapper">
      <a-form layout="inline" @keyup.enter.native="searchQuery">
        <a-row :gutter="24" type="flex" align="middle">
          <a-col flex="450px">
            <a-form-item label="">
              <a-input-group compact>
                <a-select v-model="queryParam.searchField" @change="changeForceUpdate">
                  <a-select-option value="projectNo"> 项目编号 </a-select-option>
                  <a-select-option value="projectName"> 项目名称 </a-select-option>
                  <a-select-option value="projectManager"> 项目经理 </a-select-option>
                  <a-select-option value="nodeName"> 节点名称 </a-select-option>
                </a-select>
                <a-input-search
                  style="width: 78%"
                  v-model="queryParam.keyword"
                  @search="searchQuery"
                  placeholder="请按照关键字进行搜索"
                />
              </a-input-group>
            </a-form-item>
          </a-col>
          <a-col flex="150px">
            <year-picker :year="searchYear" @yearChange="yearChange"></year-picker>
          </a-col>
          <a-col flex="auto">
            <span class="flex-btn-line">
              <a-button type="primary" @click="showSearchForm = true" icon="search">高级查询</a-button>
              <a-button
                type="primary"
                @click="handlePostExportXls('项目节点报工报表')"
                icon="download"
                >导出</a-button
              >
              <a-button type="primary" @click="searchReset" icon="reload">重置</a-button>
            </span>
          </a-col>
        </a-row>
      </a-form>

      <a-modal
        :visible="showSearchForm"
        width="70vw"
        :bodyStyle="{ padding: '10px' }"
        title="高级查询"
        @ok="handleToSearch"
        @cancel="showSearchForm = false"
      >
        <a-form-model ref="ruleForm" :label-col="labelCol" :wrapper-col="wrapperCol">
          <a-row :gutter="24">
            <a-col :span="8">
              <a-form-model-item label="项目编号">
                <a-input v-model="queryParam.projectNo" />
              </a-form-model-item>
            </a-col>
            <a-col :span="8">
              <a-form-model-item label="项目名称">
                <a-input v-model="queryParam.projectName" />
              </a-form-model-item>
            </a-col>
            <a-col :span="8">
              <a-form-model-item label="项目经理">
                <a-input v-model="queryParam.projectManager" />
              </a-form-model-item>
            </a-col>
          </a-row>
          <a-row :gutter="24">
            <a-col :span="8">
              <a-form-model-item label="项目分类">
                <CodeSelector
                  type="select"
                  :codes="projectClassList"
                  codeKey="code"
                  nameKey="name"
                  :code.sync="queryParam.searchClass"
                  :multiple="false"
                  @change="fetchSubClass"
                ></CodeSelector>
              </a-form-model-item>
            </a-col>
            <a-col :span="8">
              <a-form-model-item label="项目子类">
                <CodeSelector
                  type="select"
                  :codes="projectSubClassList"
                  codeKey="code"
                  nameKey="name"
                  :code.sync="queryParam.searchSubClass"
                  :multiple="false"
                ></CodeSelector>
              </a-form-model-item>
            </a-col>
            <a-col :span="8">
              <a-form-model-item label="计划完成时间">
                <div style="display: flex">
                  <a-date-picker
                    style="width: 120px"
                    valueFormat="YYYY-MM-DD"
                    placeholder="开始时间"
                    v-model="queryParam.planCompleteStart"
                  />
                  <div style="line-height:36px;padding0px 3px">至</div>
                  <a-date-picker
                    style="width: 120px"
                    valueFormat="YYYY-MM-DD"
                    placeholder="结束时间"
                    v-model="queryParam.planCompleteEnd"
                  />
                </div>
              </a-form-model-item>
            </a-col>
          </a-row>
          <a-row :gutter="24">
            <a-col :span="8">
              <a-form-model-item label="节点名称">
                <a-input v-model="queryParam.nodeName" />
              </a-form-model-item>
            </a-col>
            <a-col :span="8">
              <a-form-model-item label="负责人">
                <a-input v-model="queryParam.personInCharge" />
              </a-form-model-item>
            </a-col>
          </a-row>
        </a-form-model>
      </a-modal>
    </div>
    <!-- 查询区域-END -->

    <!-- 操作按钮区域 -->
    <div class="table-operator"></div>
    <div class="container">
      <a-table
        ref="table"
        bordered
        size="middle"
        :rowKey="rowKey"
        :columns="columns"
        :dataSource="dataSource"
        :pagination="ipagination"
        :rowSelection="{
          selectedRowKeys: selectedRowKeys,
          onChange: onSelectChange,
          onSelectAll: onSelectAll,
          columnWidth: 1,
        }"
        :loading="loading"
        :scroll="{ x: true }"
        @change="handleTableChange"
      >
      <template slot="completionDateRender" slot-scope="text, record">
            {{ formatDate(record.completionDate || '', 'yyyy-MM-dd') }}
          </template>
      </a-table>
    </div>

    <!-- table区域-begin -->
  </a-card>
</template>

<script>
import { JeecgListMixin } from '@/mixins/JeecgListSearchMixin'
import { codeInfoList } from '@/api/codeInfo'
import { formatDate } from '@/utils/util'
import moment from 'moment'
export default {
  name: 'nodeReport',
  mixins: [JeecgListMixin],
  components: {
    YearPicker: () => import('@/components/tools/YearPicker'),
  },
  data() {
    return {
      /* 勾选导出参数 */
      rowKey: 'strId',
      busType: 'nodeReport',
      description: '项目节点报工报表',
      projectClassList: [],
      projectSubClassList: [],
      columns: [
        {
          title: '序号',
          dataIndex: '',
          key: 'rowIndex',
          width: 5,
          align: 'center',
          customRender: function (t, r, index) {
            return parseInt(index) + 1
          },
        },
        // 到期节点数	按时完成数	逾期数	未到期	总计	及时率	节点进度占比	项目状态
        {
          title: '项目编号',
          align: 'center',
          width: 80,
          dataIndex: 'projectNo',
        },
        {
          title: '项目名称',
          align: 'center',
          width: 120,
          dataIndex: 'projectName',
        },
        {
          title: '项目经理',
          align: 'center',
          width: 100,
          dataIndex: 'projectManager',
        },
        {
          title: '节点名称',
          align: 'center',
          width: 80,
          dataIndex: 'nodeName',
        },
        {
          title: '节点任务内容',
          align: 'center',
          width: 120,
          dataIndex: 'jobContent',
          ellipsis: true,

        },
        {
          title: '计划开始时间',
          align: 'center',
          width: 80,
          dataIndex: 'planStartTime',
        },
        {
          title: '计划结束时间',
          align: 'center',
          width: 80,
          dataIndex: 'completionDate',
          scopedSlots: { customRender: 'completionDateRender' },
        },
        {
          title: '预计完成时间',
          align: 'center',
          width: 80,
          dataIndex: 'planFinishTime',
        },
        {
          title: '工期(天)',
          align: 'center',
          width: 60,
          dataIndex: 'durationDays',
        },
        {
          title: '负责人',
          align: 'center',
          width: 100,
          dataIndex: 'personInCharge',
        },
        {
          title: '实际完成时间',
          align: 'center',
          width: 80,
          dataIndex: 'realFinishTime',
        },
        {
          title: '完成时间延期(天)',
          align: 'center',
          width: 60,
          dataIndex: 'realFinishTimeOverDays',
        },
        {
          title: '是否逾期',
          align: 'center',
          width: 40,
          dataIndex: 'beOverdue',
        },
        {
          title: '情况说明',
          align: 'center',
          width: 100,
          dataIndex: 'description',
        },
      ],
      url: {
        list: '/projectReport/nodeReport',
        exportXlsUrl: '/projectReport/nodeReportExport',
      },
      showSearchForm: false,
      keyword: '',
      labelCol: { span: 8 },
      wrapperCol: { span: 15 },
      searchYear: '',
    }
  },
  mounted() {
    this.fetchClass()
    this.queryParam.searchField = 'projectNo'
    // this.searchYear = moment().format('YYYY')
    // this.queryParam.searchYear = this.searchYear
  },
  computed: {},
  methods: {
    yearChange(year) {
      this.searchYear = year
      this.queryParam.searchYear = year
      this.handleToSearch()
    },
    handleToSearch() {
      this.showSearchForm = false
      this.searchQuery()
    },
    searchReset() {
      this.queryParam = {}
      this.queryParam.searchField = 'projectNo'
      this.handleToSearch()
    },
    fetchClass() {
      codeInfoList({
        column: 'code',
        order: 'Asc',
        pageNo: 0,
        pageSize: -1,
        isdel: false,
        type: '项目分类',
      }).then((res) => {
        this.projectClassList = [{ code: '', name: '全部' }, ...res.result.records]
      })
    },
    fetchSubClass() {
      if (this.queryParam.searchClass) {
        codeInfoList({
          column: 'code',
          order: 'Asc',
          pageNo: 0,
          pageSize: -1,
          isdel: false,
          type: '项目子类',
          parentid: this.queryParam.searchClass,
        }).then((res) => {
          this.projectSubClassList = [{ code: '', name: '全部' }, ...res.result.records]
        })
      } else {
        this.projectSubClassList = [{ code: '', name: '全部' }]
      }
    },
  },
}
</script>
<style lang="less" scoped>
@import '~@assets/less/common.less';
@import '~@assets/less/hte-main.less';
@media (max-width: 1170px) {
  .page-main .container section .list-content > div.flex-num1-box {
    flex-wrap: wrap;
    > div {
      &:nth-child(1),
      &:nth-child(2) {
        width: 48%;
      }
      &:nth-child(3) {
        width: 100%;
        justify-content: flex-start;
        > span {
          margin-right: 20px;
          margin-left: 0;
        }
      }
    }
  }
  .page-main .container section .list-content > div.flex-num2-box {
    display: block;
    margin-top: 0;
  }
}
</style>
